
<template>
  <view class="like-me-list" :style="'padding-top:'+headHeight+'rpx'">   
    <head-back title="喜欢我的" @goBack="goBack"></head-back>
    <scroll-view scroll-y style="width:100%; height:100%; overflow:auto;" @scrolltolower="likePageScrolltolower" >
      <view class="list-content clear-both">  

        <view class="float-left float-group" v-for="item in likeMeDataList" >
          <view class="group text-center"  :class="{'animation-back':animationBack}" @click.stop="jumpLink(item)"> 
            <view class="group-content"  > 
              <image-loader :src="item.photo[0].link" image-style="width:100%;height:100%;border-radius:20rpx;" ></image-loader> 
              <!--标签--> 
              <view >
                <view> 
                  <view class="like-img" :style="'opacity:'+bestSelectLike">
                    <image class="img"  src='/static/image/select-like.png'  ></image> 
                  </view> 
                </view>
              </view> 
                <!--底部-->
                <view class="footer">
                  <view class="hint" >
                    <view class="name">{{item.nickname}} , {{item.age}} </view>
                    <view class="time">{{item.school}} </view>
                  </view> 
                  <!--<view class="btn-fiexd">
                    <view class="footer-btn-box">
                      <view class="btn-box ">
                        <image class="img active-img"  src='/static/image/home-dislike.png'  ></image> 
                      </view>
                      <view class="btn-box ">
                        <image class="img active-img"  src='/static/image/home-like.png'  ></image> 
                      </view>
                    </view> 
                  </view>-->
                </view> 
            </view>   
          </view> 
        </view> 
        <div class="text-center" style="padding:30rpx;" v-if="likeMeDataList.length==0"> 
          <span style="display:inline-block;line-height:50rpx;font-size:26rpx;color:#999;">暂无数据</span> 
        </div>
      </view> 
      <div class="text-center" style="padding:30rpx;" v-if="pageNum!=totalPage">
        <span class="refresh-loading"></span>
        <span style="display:inline-block;line-height:50rpx;font-size:26rpx;color:#999;">加载更多</span> 
      </div>
    </scroll-view>  
  </view>
</template>

<script> 
import * as api from '@/utils/api' ;   
import headBack from '@/components/head-back.vue' ;  
import userDetailStore from './../user-detail/store' ;     
const app = getApp()  
export default { 
  onLoad( ){     
    this.pageNum=1;  //当前第几页
    this.sizeNum=10;
    this.fetchLikeMeData();
  },
  onShow: function () {  
    let vm = this; 
    if(userDetailStore.state.detailRuuid){
      this.deleteBestSelect(userDetailStore.state.detailRuuid); 
    } 
  }, 
  components:{ 
     headBack
  },  
  data () {
    return {      
      headHeight:wx.getStorageSync('headHeight'),
      animationBack:false,
      bestSelectLike:0,

      likeMeDataList:[],
      nowDateHours:'', //剩余时间  
      pageNum:1,  //当前第几页
      sizeNum:10,
      totalPage:0, //总页数
      loadingMoreShow:false,
    }
  },  
 
  methods: {   
    goBack(){ 
      wx.navigateBack({ delta: 1 }); 
    }, 
    fetchLikeMeData(val=''){
      let vm = this;
      let body={
        page:vm.pageNum,
        size:vm.sizeNum,
      };
      vm.loadingMoreShow=false;
      api.getLikeMeList(body).then(res=>{
        let resData=res.data.data;
        vm.loadingMoreShow=true;
        if(res.data.code==300000){
          if(resData.data){
            if(val=='more'){
              resData.data.forEach((item,index)=>{
                vm.likeMeDataList.push(item);
              }) 
            }else{
              vm.likeMeDataList=resData.data;
            } 
          }else{
            vm.likeMeDataList=[];
          }  
          vm.pageNum=resData.info.page_num;
          vm.totalPage=resData.info.total_page;
        }else{
          vm.likeMeDataList=[];
        }
      })
    },
    jumpLink(item){
      userDetailStore.state.userDetail=item;
      wx.navigateTo({url:'./../user-detail/main?type=likeme'});
    },
    //删除列表
    deleteBestSelect(uid){
      let vm = this;
      vm.likeMeDataList.forEach((item,index)=>{
        if(item.ruuid==uid){
          vm.likeMeDataList.splice(index,1)  //删除选中的元素
          userDetailStore.state.detailRuuid='';
        }
      })
    },
    //滚动到底部
    likePageScrolltolower(){  
      console.log('滚动到底部');
      if(this.loadingMoreShow&&this.pageNum<this.totalPage){ 
        this.pageNum++;
        this.fetchLikeMeData('more');
      }
    },
  },
  onShareAppMessage: function(res) { 
    let selfUid = JSON.parse(wx.getStorageSync('account'));   
    let path = `pages/common/login/main?selfUid=${selfUid.uuid}`;  
    return this.onShareAppMessage('',path);
  },   
}
</script> 
 
<style lang="scss" scoped>  
.like-me-list{
  height:100vh;
}
.animation-back{ 
  transition:'all .5s';
} 
.best-head {
  margin-top:42rpx;
}
.best-head .title{ 
  font-size:48rpx;
  color:#4E5761;
  font-family:PingFangSC-Regular;
  font-weight:400;
}
.best-head .text{ 
  font-size:32rpx;
  color:#A1A7AE;
  font-family:PingFangSC-Regular;
  font-weight:400;
}

.list-content{
  width:100%;
  height:100%; 
  padding:30rpx 18rpx;
  box-sizing:border-box;
  // display:flex;
  // flex-wrap:wrap;
  // overflow:auto;

}
.float-group{
  width:50%;
}
.list-content .group{
  // flex:0 0 50%; 
  height:464rpx;
  margin-bottom:18rpx;
} 

.list-content .group-content{ 
  width:334rpx;
  height:464rpx;
  border-radius:20rpx; 
  margin:auto;
  position:relative;
}

.group-content .img{
  width:100%;
  height:100%; 
  border-radius:20rpx;
}

.group-content .like-img{
  position: absolute;
}
 .group-content .like-img  .img{
  width:100%;
  height:100%;
}  
.group-content .like-img{
  width:160rpx;
  height:100rpx; 
  top:5vh;
  left:6.4vw;
}
 
.group-content .footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%; 
  border-radius:20rpx;  
  padding:0 12rpx;
  box-sizing:border-box;
}
.group-content .footer .hint{ 
  text-align: left;
  width:230rpx;
  height:80rpx; 
  // margin-bottom:90rpx;
  margin-bottom:20rpx;
}

.group-content .footer .hint .name{
  font-size:30rpx;
  font-family:PingFangSC-Medium;
  font-weight:500;
  color:#fff; 
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap; 
}
.group-content .footer .hint .time{
  font-size:26rpx;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:#F8CA1C; 
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap; 
}
.btn-fiexd{
  position:relative;
}
.footer-btn-box{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:90rpx;
  padding-bottom:10rpx;
  display:flex;
  align-items:center;
  justify-content:center;
  .btn-box{
    flex:1;  
    .img{
      margin-top:20rpx;
      width:80rpx;
      height:80rpx;
      transform: scale(1); 
      transition:all .3s;
    }
  }
  .active-img{
     transform: scale(1.2); 
     transition:all .3s;
  }
}
 
.super-like-transform{ 
  animation:myfirst 1s;
}

@keyframes myfirst{
  0%   {transform:translateY(0px) rotateY(0deg);-webkit-transform:translateY(0px) rotateY(0deg);}
  25%   {transform:translateY(-120px) rotateY(0deg);-webkit-transform:translateY(-120px) rotateY(0deg);}
  50%   {transform:translateY(-120px) rotateY(360deg);-webkit-transform:translateY(-120px) rotateY(360deg);}
  /*25%  {transform:rotateY(0deg);}*/
  /*50%  {transform:rotateY(0deg);}*/
  100% {transform:rotate(0deg);-webkit-transform:rotate(0deg);}
}
@-webkit-keyframes  myfirst{
  0%   {transform:translateY(0px) rotateY(0deg);-webkit-transform:translateY(0px) rotateY(0deg);}
  25%   {transform:translateY(-120px) rotateY(0deg);-webkit-transform:translateY(-120px) rotateY(0deg);}
  50%   {transform:translateY(-120px) rotateY(360deg);-webkit-transform:translateY(-120px) rotateY(360deg);}
  /*25%  {transform:rotateY(0deg);}*/
  /*50%  {transform:rotateY(0deg);}*/
  100% {transform:rotate(0deg);-webkit-transform:rotate(0deg);}
} 
.superlike_num{ 
  width:80rpx;
  height:80rpx;
  line-height: 80rpx;
  border-radius: 50%;
  background:#fff;
  box-shadow:0  2rpx 8rpx 0  rgba(153,178,217,0.59);
  color:#28B5FF;
  font-size:40rpx; 
  text-align: center;
}


</style>
